<!--
*  2021-03-15
*  坯布信息
-->
<template>
  <div id="app" class="cloth-info">
    <!-- 头部导航 -->
    <van-nav-bar
      title="坯布信息"
      ref="header"
      left-arrow
      left-text="返回"
      @click-left="onClickLeft"
    >
    </van-nav-bar>

    <div style="overflow: auto">
      <div style="padding:1vh 1vw;">
        <div style="border: 1px solid red;" v-for="store in printRow.stores">
          <div style="margin-left: 2vw;margin-bottom: 1vh;">
            <van-row>
              <van-col :span="12"><span>预计库存:{{ store.expectNum }}</span></van-col>
              <van-col :span="12"><span>流程上:{{ store.producingNum }}</span></van-col>
            </van-row>
          </div>
          <div style="margin-left: 2vw;" v-for="areaNum in store.areaNums">
            <span>{{ areaNum.split(SPLIT_XHX)[0] }}: {{ areaNum.split(SPLIT_XHX)[1] }}</span>
          </div>
        </div>
      </div>

      <div>
        <div class="info">
          <span>品名:</span>
          <span>{{ printRow.designNo }}</span>
        </div>
        <div class="info">
          <span>色号:</span>
          <span>{{ printRow.colorNo }}</span>
        </div>
        <div class="info">
          <span>批号:</span>
          <span>{{ printRow.lotNo }}</span>
        </div>
        <div class="info">
          <span>匹号:</span>
          <span>{{ printRow.designSeqNo }}</span>
        </div>
        <div class="info">
          <span>织机号:</span>
          <span>{{ printRow.loomNo }}</span>
        </div>
        <div class="info">
          <span>长度:</span>
          <span>{{ printRow.length }}</span>
        </div>
        <div class="info">
          <span>重量:</span>
          <span>{{ printRow.weight }}</span>
        </div>
        <div class="info">
          <span>米克重:</span>
          <span :class="printRow.className">{{ printRow.miWeight + "(" + printRow.miWeightDesign + ")" }}</span>
        </div>
        <div class="info">
          <span>整经人:</span>
          <span>{{ printRow.zjOperator }}</span>
        </div>
        <div class="info">
          <span>整经机台:</span>
          <span>{{ printRow.jtNum }}</span>
        </div>
        <div v-if="printRow.czOperator !== ''" class="info">
          <span>穿棕人:</span>
          <span>{{ printRow.czOperator }}</span>
        </div>
        <div v-if="printRow.djOperator !== ''" class="info">
          <span>打结人:</span>
          <span>{{ printRow.djOperator }}</span>
        </div>
        <div class="info">
          <span>验布人:</span>
          <span>{{ printRow.ybOperator }}</span>
        </div>
        <div class="info">
          <span>修布人:</span>
          <span>{{ printRow.xbOperator }}</span>
        </div>
      </div>

      <!-- 试样详情 -->
      <div style="margin-top:1vh;margin-bottom: 1vh;">
        <div style="color: #1677FF;font-size: 1.2rem;font-weight: bold;text-align: center"><span>分段样布详情</span></div>
        <grey-cloth-sample v-if="printRow.greyClothIds > 0" :grey-cloth-id="printRow.greyClothIds"></grey-cloth-sample>
      </div>
    </div>
  </div>
</template>

<script>
import { openWin } from "@/utils/index";
import {getGreyClothViewList} from "@/api/cloth";
import {SPLIT_COMMA, SPLIT_XHX} from "@/api/enum";
import GreyClothSample from "@/views/weaving/grey-cloth-sample/App";
export default {
  name: "clothInfo",
  components: {GreyClothSample},
  data() {
    return {
      SPLIT_XHX,
      printRow: {
        greyClothIds: 0,
        designNo: '',
        colorNo: '',
        lotNo: '',
        designSeqNo: '',
        loomNo: '',
        length: '',
        weight: '',
        miWeight: '',
        zjOperator: '',
        jtNum: '',
        czOperator: '',
        djOperator: '',
        ybOperator: '',
        xbOperator: ''
      },
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      this.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }
  },
  methods: {
    //初始化
    initFn(that) {
      const pageParam = window.api.pageParam;
      Object.keys(pageParam).forEach(key => {
        that.printRow[key] = pageParam[key];
      });
      that.$set(that.printRow, "stores", []);


      window.api.addEventListener({
        name:'viewdisappear'
      }, function() {
        window.api.closeWin();
      });

      if(that.printRow.storeId == 0) {
        that.$toast.fail({
          message: "织造车间未扫码出库,系统找不到准确的库存信息",
          duration: 7000
        });
        return;
      }

      //请求库存信息
      getGreyClothViewList({
        pageNum: 1,
        pageSize: 100,
        storeIds: [that.printRow.storeId].join(SPLIT_COMMA),
      }, res => {
        res.list.forEach(store => {
          that.printRow.stores.push(store);
        });
      });
    },

    // 返回
    onClickLeft() {
      openWin("yarn-weaving");
    }
  },
};
</script>

<style lang="scss">
.cloth-info {
  display: flex;
  flex-direction: column;
  height: 100%;

  .info {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #8d8d8d;
    padding:1vh 3vw;
  }
}
</style>
